 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue路由机制</title>
	</head>
	<body>
		<div id="app">
			<!-- 2.定义路由连接
				router-link 解析之后就变为a标签
				to解析之后就变为hre属性-->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">二哈</router-link>
			<!-- 3. 定义路由的填充位，该位置用来展现具体页面（组件）-->
			<router-view></router-view>
		</div>
		<!-- 4.2定义组件模板 -->
		<template id="userTem">
			<div>
				<h1>我是组件内容</h1>
			</div>
		</template>
		<template id="dogTem">
			<div>
				<h1>宠物狗</h1>
				<!-- 定义子组件路由 -->
				<router-link to="/dog/samo">萨摩耶</router-link>
				<router-link to="/dog/hsq">哈士奇</router-link>
				<!-- 定义子组件占位符 -->
				<router-view></router-view>
			</div>
		</template>
		<!-- 1.引入vue.js -->
		<script src="../../Js/vue.js"></script>
		<!-- 2.导入路由JS 注意事项 -->
		<script src="../../Js/vue-router.js"></script>
		<script>
			//4.定义组件
			let user = {
				//4.1定义页面
				template: "#userTem"
			}
			let dog ={
				template: "#dogTem"
			}
			let samo ={
				template: `<h1>通体雪白</h1>`
			}
			let hsq ={
				template: `<h1>拆家狂魔</h1>`
			}
			//5.创建路由对象，定义路由规则
			let router =new VueRouter({
				//定义路由规则
				routes: [
					/*利用redirect实现路由重定向*/
					{path:"/",redirect:"/user"},
					{path:"/user",component:user},
					{path:"/dog",component:dog,children:[
						{path:"/dog/samo",component:samo},
						{path:"/dog/hsq",component:hsq}
					]},
					/*该请求是/根目录下的请求，所以组件渲染也在根组件*/
					// {path:"/dog/samo",component:samo},
					// {path:"/dog/samo",component:hsq}
					]
			})
			//6.将路由对象交给Vue对象管理
			const vue =new Vue({
				el: "#app",
				//绑定路由
				//router : router //当K-V一样是可以省略写一个
				router
			})
		</script>
	</body>
</html>
